<template>
  <div>
    <el-container style="background: #f5f7f9;">
      <el-header style="background: #fff;padding: 12px 12px;height:auto;">
        <div>
          <el-form :model="queryData" :inline="true" size="small">
            <el-form-item v-if="!isOrgOwner" label="客户">
              <el-select v-model="queryData.orgOwner" clearable filterable>
                <el-option v-for="(d, i) in customerOptions" :key="i" :label="d.orgOwnerName" :value="d.orgOwner" />
              </el-select>
            </el-form-item>
            <el-form-item label="订单号">
              <el-input v-model="queryData.orderId" :rows="1" style="width: 280px;" type="textarea" placeholder="多个单号用回车分割" />
            </el-form-item>
            <el-form-item label="客户订单号">
              <el-input v-model="queryData.customerRef" :rows="1" style="width: 280px;" type="textarea" placeholder="多个单号用回车分割" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchData()">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main style="margin-top: 15px; background: #fff;padding: 12px 16px 0 16px;height: 100%;">
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          tooltip-effect="dark"
          :max-height="tableHeight"
          border
          :row-class-name="rowClassName"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="orderNumber" label="订单号" />
          <el-table-column prop="customerRef" label="客户订单号" />
          <el-table-column prop="orgOwnerName" label="客户" />
          <el-table-column prop="totalCarton" width="55" label="箱数" />
          <el-table-column prop="totalWeight" label="打单重量" />
          <el-table-column prop="createAt" label="创建时间" />
          <el-table-column prop="status" label="地址">
            <template slot-scope="scope">
              <p>{{ scope.row.consigneeAddress.company }}</p>
              <p>{{ scope.row.consigneeAddress.address }}</p>
              <p>{{ scope.row.consigneeAddress.address2 }}</p>
              <p>{{ scope.row.consigneeAddress.address2 }}</p>
              <p>{{ scope.row.consigneeAddress.city + " " + scope.row.consigneeAddress.state + " " + scope.row.consigneeAddress.zipCode }}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="small" shape="circle" type="text" @click="showDetail(scope.row)">明细</el-button>
              <el-button v-has="70203" size="small" shape="circle" type="text" @click="downloadLabel(scope.row)">下载面单</el-button>
              <div v-if="!isOrgOwner">
                <el-button v-has="70301" size="small" shape="circle" type="text" @click="showPassedDialog(scope.row)">审核通过</el-button>
                <el-button v-has="70302" size="small" shape="circle" type="text" @click="del(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer style="padding:0;background: #fff;">
        <div style="text-align: right; padding-top: 10px;">
          <!-- 分页 -->
          <el-pagination
            background
            :current-page="queryData.currentPage"
            :page-sizes="[50, 100, 200, 300, 400]"
            :page-size="queryData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="float: right;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div></el-footer>
    </el-container>
    <el-dialog :visible.sync="detailDialogVisible" width="70%" center :close-on-click-modal="false">
      <el-collapse v-model="detailExpandItems">
        <el-collapse-item name="1" title="基础信息">
          <el-row>
            <el-col :span="6">订单号:&nbsp;&nbsp;{{ detail.orderNumber }}</el-col>
            <el-col :span="6">客户订单号:&nbsp;&nbsp;{{ detail.customerRef }}</el-col>
            <el-col :span="6">客户:&nbsp;&nbsp;{{ detail.orgOwnerName }}</el-col>
          </el-row>
          <br>
          <el-row>
            <el-col :span="6">总体积(立方米):&nbsp;&nbsp;{{ detail.totalVolume }}</el-col>
            <el-col :span="6">总重量(KG):&nbsp;&nbsp;{{ detail.totalWeight }}</el-col>
            <el-col :span="6">下单时间:&nbsp;&nbsp;{{ detail.createAt }}</el-col>
            <el-col :span="6">亚马逊仓码:&nbsp;&nbsp;{{ detail.consigneeAddress.fbaCode }}</el-col>
          </el-row>
          <br>
          <el-row>
            <el-col :span="6">收件人:&nbsp;&nbsp;{{ detail.consigneeAddress.contacter }}</el-col>
            <el-col :span="6">电话:&nbsp;&nbsp;{{ detail.consigneeAddress.phone }}</el-col>
            <el-col :span="6">国家:&nbsp;&nbsp;{{ detail.consigneeAddress.countryCode }}</el-col>
            <el-col :span="6">州/省:&nbsp;&nbsp;{{ detail.consigneeAddress.state }}</el-col>
          </el-row>
          <br>
          <el-row>
            <el-col :span="6">城市:&nbsp;&nbsp;{{ detail.consigneeAddress.city }}</el-col>
            <el-col :span="6">公司名:&nbsp;&nbsp;{{ detail.consigneeAddress.company }}</el-col>
            <el-col :span="6">邮编:&nbsp;&nbsp;{{ detail.consigneeAddress.zipCode }}</el-col>
          </el-row>
          <br>
          <el-row>
            <el-col :span="24">地址1:&nbsp;&nbsp;{{ detail.consigneeAddress.address }}</el-col>
          </el-row>
          <br>
          <el-row>
            <el-col :span="24">地址2:&nbsp;&nbsp;{{ detail.consigneeAddress.address2 }}</el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-dialog>

    <el-dialog :visible.sync="passedDialog" width="30%" :close-on-click-modal="false">
      <el-form>
        <el-row>
          <el-col :span="24">
            <el-form-item label="预付金额USD" class="is-required">
              <el-input v-model.trim="orderForm.chargePrepaid" type="number" placeholder="冻结金额USD" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="费用科目" class="is-required">
              <el-select v-model="orderForm.commissionChargeSubjectId" clearable filterable style="width:100%;" placeholder="如果没有可选项,请先新建费用科目">
                <el-option v-for="(item, index) in chargeSubjectOptions" :key="index" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right: 8px" @click="passedDialog = false">取消</el-button>
        <el-button type="primary" @click="passed">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import request from '@/utils/request'
import { copyProperty } from '@/utils/tools'
export default {
  components: {},
  data() {
    return {
      passedDialog: false,
      detailOrderId: '',
      batch_upload_mask: false,
      formLabelWidth: '120px',
      chargeSubjectOptions: [],
      downloadLabelCtx: {
        date: '',
        orderIds: ''
      },
      detailDialogVisible: false,
      conditions: {
        export: 0,
        status: '',
        product: '',
        number: '',
        startDate: '',
        endDate: '',
        orgId: '',
        currentPage: 1,
        pageSize: 100,
        trackingNumbers: []
      },
      queryData: {
        pageSize: 50,
        currentPage: 0,
        orgOwner: '',
        orderId: '',
        customerRef: '',
        channelId: '',
        status: ''
      },
      detailDefault: {
        orderNumber: '',
        channelName: '',
        customerRef: '',
        consigneeAddress: {
          contacter: '',
          phone: '',
          countryCode: '',
          state: '',
          city: '',
          address: '',
          address2: '',
          company: '',
          zipCode: '',
          fbaCode: '',
          deliverySignature: 'false'
        },
        cartons: [],
        createAt: '',
        orgOwnerName: '',
        totalCarton: 0,
        totalVolume: '',
        totalWeight: '',
        txs: [],
        packingListTableBody: [],
        trackingNumbers: []
      },
      detail: {
        orderNumber: '',
        channelName: '',
        customerRef: '',
        consigneeAddress: {
          contacter: '',
          phone: '',
          countryCode: '',
          state: '',
          city: '',
          address: '',
          address2: '',
          company: '',
          zipCode: '',
          fbaCode: '',
          deliverySignature: 'false'
        },
        cartons: [],
        createAt: '',
        orgOwnerName: '',
        totalCarton: 0,
        totalVolume: '',
        totalWeight: '',
        txs: [],
        packingListTableBody: [],
        trackingNumbers: [],
        refs: [],
        tracking: []
      },
      detailExpandItemsDefault: ['1', '2'],
      detailExpandItems: ['1', '2'],
      numberTextArea: '',
      trackingNumbers: '',
      orgs: [],
      tableData: [],
      multipleSelection: [],
      customerList: [],
      currentPage: 1, // 分页
      total: 0,
      channelProduct: [],
      channelMap: {},
      statusMap: {},
      orderCostData: [],
      orderFormDefault: {
        chargePrepaid: 0,
        orderId: '',
        commissionChargeSubjectId: ''
      },
      orderForm: {
        chargePrepaid: 0,
        orderId: '',
        commissionChargeSubjectId: ''
      }
    }
  },
  computed: {
    tableHeight() {
      return document.documentElement.clientHeight - 260
    },
    ...mapState(//
      {
        customerOptions: state => state.base.customerOptions,
        profile: state => state.user
      }
    ),
    isOrgOwner() {
      return this.profile.orgOwner
    }
  },
  created() {
    this.queryOrder()
    this.loadChargeSubjectOptions()
  },
  methods: {
    downloadLabel(row) {
      request({
        url: '/d/lm-label-truck?orderId=' + row.orderId,
        method: 'get'
      }).then(res => {
        if (res.success) {
            window.open(res.data)
        }
      })
    },
    cartonTableSpanMethod(row) {
      if (row.row.rowSpan > 0 && row.columnIndex <= 4) {
        return [row.row.rowSpan, 1]
      } else if (row.columnIndex > 4) {
        return [1, 1]
      } else if (row.columnIndex <= 4) {
        return [0, 1]
      }
    },
    searchData() {
      this.queryData.currentPage = 1
      this.queryOrder()
    },
    // 搜索
    queryOrder() {
      request({
        url: 'truck/review',
        data: this.queryData,
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    deleteOrders() {
      const _this = this
      const orderIds = []
      if (_this.multipleSelection.length === 0) {
        _this.$message({
          type: '提示',
          message: '请选择订单'
        })
        return
      }
      _this.multipleSelection.forEach(a => {
        orderIds.push(a.id)
      })
      this.$confirm('是否取消的订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
        })
        .catch(() => {})
    },
    // 查看
    showDetail(row) {
      this.detailOrderId = row.orderId
      this.detailExpandItems = []
      this.detailExpandItems = [...this.detailExpandItemsDefault]
      this.detailDialogVisible = true
      copyProperty(this.detail, this.detailDefault)
      this.drawerTitle = '明细'
      copyProperty(this.detail, row)
      this.detail.channelName = row.channelName + ''
      this.detail.orgOwnerName = row.orgOwnerName
    },
    showPassedDialog(row) {
      this.passedDialog = true
      this.orderForm.orderId = row.orderId
    },
    passed() {
      request({
        url: 'truck/review-passed',
        method: 'post',
        data: this.orderForm
      }).then(res => {
        if (res.success) {
          copyProperty(this.orderForm, this.orderFormDefault)
          this.passedDialog = false
          this.queryOrder()
        }
      })
    },
    flatCartionDetail(cartons) {
      const flats = []
      // sameSpecCartons
      cartons.forEach(c => {
        for (let i = 0; i < c.details.length; i++) {
         const flat = {
            'rowSpan': 0,
            'length': '',
            'width': '',
            'height': '',
            'weight': '',
            'skuNameEn': '',
            'skuNameCn': '',
            'qty': '',
            'skuWeight': '',
            'unitPrice': '',
            'currency': '',
            'sameSpecCartons': ''
          }
          if (i === 0) {
            flat.rowSpan = c.details.length
          }
          copyProperty(flat, c)
          copyProperty(flat, c.details[i])
          flats.push(flat)
        }
      })
      return flats
    },
    // 删除
    del(row) {
      this.$confirm('是否删除订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
        url: 'truck/review-del?orderId=' + row.orderId,
        method: 'get'
      }).then(res => {
        if (res.success) {
         this.queryOrder()
        }
      })
      })
    },
    loadChargeSubjectOptions() {
      request({
        url: 'charge-subject/option',
        method: 'get'
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.chargeSubjectOptions = res.data
          }
        }
      })
    },
    // 多选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 分页
    handleSizeChange(val) {
      this.queryData.currentPage = 1
      this.queryData.pageSize = val
      this.queryOrder()
    },
    handleCurrentChange(val) {
      this.queryData.currentPage = val
      this.queryOrder()
    },
    // 行单独修改颜色
    rowClassName({ row }) {
      const c = row.cost
      if (c / row.totalWeight > 1) {
          return 'red'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
<style>
.red {
  color: red;
  /* background: indianred; */
}
</style>
